<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册界面</title>
    <style>
      body {
        width: 100%;
        height: 100%;
        background-image: url(./txt/image/背景1.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100vh;
      }

      * {
        list-style: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
      }

      .box {
        width: 500px;
        height: 400px;
        margin: 180px auto;
        margin-bottom: 0;
        border: 1px solid #999;
        border-radius: 10px;
        backdrop-filter: blur(8px);
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.8);
        border-left: 1px solid rgba(255, 255, 255, 0.8);
      }

      ul {
        margin-top: 10px;
        margin-left: 60px;
        width: 100%;
        padding: 20px;
      }

      li {
        width: 100%;
        height: 30px;
        margin-top: 10px;
      }

      li label {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: right;
        font-size: 15px;
        padding-right: 5px;
        font-weight: 500;
      }
#label_sex{
  width:30px;
}
       li input {
        width: 150px;
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        border-radius: 8px;
        border: 1px solid #999;
      } 

      li button {
        margin-left: 10px;
        width: 50px;
        height: 30px;
        background-color: skyblue;
        color: #fafafa;
        font-size: 15px;
        border: 1px solid transparent;
      }

      li h5 {
        display: inline-block;
        margin-left: 5px;
        width: 120px;
        height: 30px;
        color: #666;
        font-size: 15px;
        line-height: 30px;
      }

      .box1 {
        width:100%;
        padding: 0 30%;
        height: 30px;
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      h3 {
        width: 80px;
        height: 30px;
        margin: 0 auto;
        text-align: center;
        background-color: orange;
        border: 2px solid orange;
        border-radius: 5px;
        overflow: hidden;
      }

      h3 a {
        font-size: 18px;
        color: #fafafa;
      }

      h4 {
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        color: rgb(150, 150, 150);
        margin: 10px auto;
      }
      .sex{
        width: 15px;
        height: 15px;
      }
    </style> 
  </head>
 <script src="./txt/js/axios.js"></script>

  <body>
    <div class="box">
      <ul>
        <li>
          <label for="username">姓名:</label><input type="text" name="" id="username" />
        </li>
        <li>
          <label for="nickname">昵称:</label><input type="text" name="" id="nickname" />
        </li>
        <li>
          <label>性别:</label><label for="man" id="label_sex">男:</label><input class="sex" type="radio" name="sex" value="man" id="man"/>&nbsp;&nbsp;&nbsp;
          <label for="woman" id="label_sex">女:</label> <input class="sex" type="radio" name="sex" value="woman" id="woman"/>
        </li>
        <li>
          <label for="email">邮箱:</label><input type="email" id="email"/>
        </li>
        <li>
          <label for="phone">手机/工号:</label><input type="text" id="phone"/>
        </li>
        <li>
          <label for="address">地址:</label><input type="text" id="address"/>
        </li>
        <li>
          <label for="password">密码:</label><input type="password"  id="password"/>
        </li>
        <li>
          <label for="passwordsure">确认密码:</label><input type="password" id = 'passwordsure'/>
        </li>
        <li style="padding-left:115px;">
          <h5 id="mesg_h5" style="display:none;">输入信息有误</h5>
        </li>
      </ul>

    </div> 
   <div class="box1">
        <h3><a href="javascript:;" id="zhuce">完成注册</a></h3>
        <h3><a href="./login.html" id="denlu">去登录</a></h3>
      </div>
    <script src="./txt/js/register.js"></script>
   
  </body>
</html>
